<template>
  <div class="live-masonry-view">
    <ul v-masonry transition-duration="1s" item-selector=".item">
      <li v-masonry-tile class="item" v-for="(d, i) in DataArr" :key="i" v-lazy="d.thumb">
        <div class="cover-layer" :class="[d.follow === false ? 'follow':'']"></div>
        <div class="img" v-if="d.thumb">
          <img :src="d.thumb" />
        </div>

        <div class="text">
          <div class="van-ellipsis" v-if="d.intro">{{d.intro}}</div>
          <div class="van-ellipsis" v-if="d.title">{{d.title}}</div>
        </div>

        <div class="live-time" v-if="d.liveTime">
          <i></i>
          <div class="time">{{conversionOfTime(d.liveTime)}}</div>
        </div>

        <div class="live" v-if="d.liveType=='video' && !d.liveTitle">
          <i></i>
        </div>

        <div class="live-audio" v-if="d.liveType=='audio' && !d.liveTitle">
          <i></i>
        </div>

        <div class="live-official" v-if="d.follow === false">
          <i></i>
          <div class="time">直播回放</div>
        </div>

        <div class="user">
          <img :src="d.avatarUrl" />
          <div class="van-ellipsis">{{d.nickName}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { conversionOfTime_MDhm } from "@/utils";
export default {
  name: "LiveMasonryView",
  props: ["DataArr"],
  methods: {
    conversionOfTime(time) {
      return conversionOfTime_MDhm(time);
    }
  }
};
</script>

<style lang="scss" scoped>
.live-masonry-view {
  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    li {
      width: 50%;
      padding: 5px;
      margin: 10px 0;
      position: relative;

      .cover-layer {
        width: 94%;
        height: 94%;
        position: absolute;
        bottom: 5px;
        background-image: linear-gradient(
          rgba(255, 255, 255, 0.2),
          rgba(0, 0, 0, 0.5)
        );
        border-radius: 10px;
      }

      .follow {
        background-color: rgba(0, 0, 0, 0.5);
      }

      .img {
        width: 100%;
        img {
          display: block;
          width: 100%;
          border: 1px solid #f2f2f2;
          border-radius: 10px;
        }
      }

      .text {
        height: 32px;
        margin: 10px 0 0 0;
        color: rgb(255, 255, 255);
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        left: 15px;

        div {
          width: 167px;
          font-size: 14px;
          font-weight: 700;
          overflow: hidden;
        }
      }

      .live,
      .live-time,
      .live-audio,
      .live-official {
        margin: 10px 0;
        padding: 2px 7px;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 0;
        right: 17px;
        display: flex;
        align-items: center;
        i {
          width: 15px;
          height: 15px;
          display: block;
          background-image: url("~@/assets/images/home/yNL.png");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }
        .time {
          color: rgb(255, 255, 255);
          font-size: 12px;
          margin-left: 5px;
        }
      }

      .live-time {
        i {
          background-image: url("~@/assets/images/home/drT.png");
        }
      }

      .live-audio {
        i {
          background-image: url("~@/assets/images/home/z3W.png");
        }
      }

      .live-official {
        i {
          width: 20px;
          height: 20px;
          background-image: url("~@/assets/images/home/ujb.png");
        }
      }

      .user {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 40px;
        left: 15px;
        img {
          width: 20px;
          height: 20px;
          border-radius: 999px;
          margin-right: 3px;
        }

        div {
          width: 100px;
          font-size: 12px;
          color: #ffffff;
        }
      }
    }
  }
}
</style>